<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>计科入门扫盲小册</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
  <header class="hero" id="top">
    <div class="hero__content">
      <p class="hero__badge">Zero to One</p>
      <h1>计科入门扫盲互动手册</h1>
      <p class="hero__subtitle">
        从“电脑是什么”到“如何使用 AI 赋能开发”，带你快速建立完整的计算机世界观，按需跳转，每一块内容都能互动探索。
      </p>
      <div class="hero__cta">
        <button class="btn btn--primary" data-scroll="#quick-guide">快速导航</button>
        <button class="btn btn--ghost" data-scroll="#version-control">从 Git 开始</button>
      </div>
    </div>
    <figure class="hero__figure">
      <img src="https://images.unsplash.com/photo-1523475472560-d2df97ec485c?auto=format&fit=crop&w=900&q=80" alt="学习编程" />
      <figcaption>边学边练，掌握数字世界的必备技能</figcaption>
    </figure>
  </header>

  <nav class="floating-nav" aria-label="页面导航">
    <button data-scroll="#overview">入门观</button>
    <button data-scroll="#version-control">版本控制</button>
    <button data-scroll="#toolchain">工具链</button>
    <button data-scroll="#os">操作系统</button>
    <button data-scroll="#algo">算法</button>
    <button data-scroll="#languages">语言对比</button>
    <button data-scroll="#network">网络与安全</button>
    <button data-scroll="#productivity">效率与硬件</button>
    <button data-scroll="#ai">AI 时代</button>
  </nav>

  <main>
    <section id="quick-guide" class="section section--grid">
      <div class="section__content">
        <h2>学习路线导航</h2>
        <p>
          初学者最容易迷茫：该先学语言还是系统？先做项目还是刷题？下面的交互式时间线帮你拆解关键里程碑。
        </p>
        <div class="timeline" role="list">
          <button class="timeline__item timeline__item--active" data-timeline="phase0">基础电脑操作</button>
          <button class="timeline__item" data-timeline="phase1">掌握一门语言</button>
          <button class="timeline__item" data-timeline="phase2">算法与数据结构</button>
          <button class="timeline__item" data-timeline="phase3">项目实践与协作</button>
          <button class="timeline__item" data-timeline="phase4">部署、安全与 AI</button>
        </div>
      </div>
      <aside class="timeline__details" id="timeline-details">
        <h3>阶段概览</h3>
        <p>点击时间线节点了解每个阶段的目标、推荐资源与练习建议。</p>
        <ul>
          <li>熟悉文件管理、键盘快捷键、常用软件安装</li>
          <li>尝试命令行：Windows PowerShell、macOS/Linux 终端</li>
          <li>掌握基本网络概念：IP、DNS、浏览器开发者工具</li>
          <li>记录学习过程，建立知识库（Notion/OneNote）</li>
        </ul>
      </aside>
    </section>

    <section id="overview" class="section">
      <h2>为什么要系统学习计算机科学？</h2>
      <div class="cards cards--3">
        <article class="card">
          <h3>技能通用性</h3>
          <p>编程是数字化时代的“第二语言”，无论你未来做产品、数据或安全，逻辑思维与自动化能力都是核心竞争力。</p>
        </article>
        <article class="card">
          <h3>解决现实问题</h3>
          <p>课程项目、日常工具、兼职实习都会用到。掌握流程后，你可以独立完成自动化脚本、网站、数据分析。</p>
        </article>
        <article class="card">
          <h3>持续学习的框架</h3>
          <p>建立从“概念-实践-反馈”的闭环，有助于在快速变化的技术世界中保持领先。</p>
        </article>
      </div>
    </section>

    <section id="version-control" class="section section--accent">
      <div class="section__header">
        <h2>版本控制与代码托管</h2>
        <p>点击下方标签了解 Git、GitHub 与 Gitee 的定位与使用建议。</p>
      </div>
      <div class="tab-group" role="tablist" aria-label="版本控制选项">
        <button class="tab tab--active" role="tab" aria-selected="true" data-tab="git">Git 核心</button>
        <button class="tab" role="tab" aria-selected="false" data-tab="github">GitHub</button>
        <button class="tab" role="tab" aria-selected="false" data-tab="gitee">Gitee</button>
      </div>
      <div class="tab-panel tab-panel--active" id="tab-git">
        <h3>分布式版本控制</h3>
        <p>Git 记录文件快照，可以离线提交，支持多人协作。掌握工作区（Working Tree）、暂存区（Stage）、仓库（Repository）是入门关键。</p>
        <div class="grid grid--2">
          <ul>
            <li><code>git init</code>：创建仓库</li>
            <li><code>git clone URL</code>：克隆远端项目</li>
            <li><code>git status</code>：查看改动</li>
            <li><code>git add/commit</code>：暂存与提交</li>
            <li><code>git branch</code> 与 <code>git merge</code>：分支协作</li>
          </ul>
          <div class="info-card">
            <h4>最佳实践</h4>
            <p>每个提交围绕单一主题，写清晰信息；使用分支隔离功能开发；合并前自测并书写 Pull Request 描述。</p>
          </div>
        </div>
      </div>
      <div class="tab-panel" id="tab-github">
        <h3>全球开源中心</h3>
        <p>GitHub 是最大的开源社区，可学习优秀项目、提交 issue、参与贡献。提供 Actions、Pages 等云服务。</p>
        <ul>
          <li>探索优秀项目：Trending、Awesome 系列</li>
          <li>使用 Issues/Discussions 协作</li>
          <li>利用 GitHub Actions 自动化测试与部署</li>
          <li>若访问困难，可切换 DNS、配置科学上网或使用镜像</li>
        </ul>
      </div>
      <div class="tab-panel" id="tab-gitee">
        <h3>国产托管平台</h3>
        <p>Gitee（码云）网络友好，适合国内企业与高校项目，支持私有仓库、代码扫描、安全管理。</p>
        <ul>
          <li>与国家开源镜像站互通，下载速度快</li>
          <li>支持工作流、Wiki、代码评审</li>
          <li>企业版提供权限分级与项目统计</li>
          <li>可作为 GitHub 备份镜像，避免单点依赖</li>
        </ul>
      </div>
    </section>

    <section id="toolchain" class="section">
      <h2>编译器、解释器与执行器</h2>
      <div class="switcher" role="tablist">
        <button class="switcher__btn switcher__btn--active" data-panel="compiler">编译器</button>
        <button class="switcher__btn" data-panel="interpreter">解释器</button>
        <button class="switcher__btn" data-panel="runtime">执行器/运行时</button>
      </div>
      <div class="panels">
        <article class="panel panel--active" id="panel-compiler">
          <h3>Compiler</h3>
          <p>一次性将源码转换为机器码，可独立运行，典型语言：C/C++、Rust。适合对性能要求高的场景。</p>
          <figure>
            <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=800&q=80" alt="编译流程" />
            <figcaption>编译阶段包括词法、语法、优化与生成目标文件。</figcaption>
          </figure>
        </article>
        <article class="panel" id="panel-interpreter">
          <h3>Interpreter</h3>
          <p>逐行或逐块解释执行，启动快，便于调试。Python、Ruby 属于此类，现代实现常结合即时编译（JIT）。</p>
          <figure>
            <img src="https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?auto=format&fit=crop&w=800&q=80" alt="解释执行" />
            <figcaption>解释器在运行时与程序对话，灵活度高。</figcaption>
          </figure>
        </article>
        <article class="panel" id="panel-runtime">
          <h3>Runtime / Executor</h3>
          <p>运行时负责内存管理、垃圾回收、系统调用封装，如 JVM、.NET CLR、Node.js。理解运行时架构有助于性能调优。</p>
          <figure>
            <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=800&q=80" alt="运行时环境" />
            <figcaption>运行时提供安全沙箱、标准库与模块系统。</figcaption>
          </figure>
        </article>
      </div>
    </section>

    <section id="os" class="section section--grid">
      <div class="section__content">
        <h2>Windows、Linux、macOS 对比</h2>
        <p>点击标签切换应用场景，了解不同系统的优势与限制。</p>
        <div class="pill-group" role="tablist">
          <button class="pill pill--active" data-os="daily">日常使用</button>
          <button class="pill" data-os="dev">开发/科研</button>
          <button class="pill" data-os="server">服务器</button>
        </div>
        <div class="os-table" id="os-table"></div>
      </div>
      <aside class="info-card">
        <h3>为何高校多用 Windows？</h3>
        <p>标准化镜像部署快、软件兼容好、维护成本低；同时可配合虚拟机练习 Linux。建议自带电脑安装 WSL 或虚拟机体验多系统。</p>
        <p><strong>必备操作：</strong>快捷键、磁盘管理、系统更新、虚拟机（VirtualBox、VMware）、包管理器（winget、Homebrew、apt）。</p>
      </aside>
    </section>

    <section id="algo" class="section">
      <h2>算法与数据结构的重要性</h2>
      <div class="accordion" role="tablist">
        <article class="accordion__item accordion__item--open">
          <button class="accordion__trigger" data-accordion="why">为什么要学？</button>
          <div class="accordion__content">
            <p>算法决定程序效率，数据结构决定组织方式。掌握后能写出更快、更稳的代码，解决更复杂的问题，也是技术面试核心。</p>
          </div>
        </article>
        <article class="accordion__item">
          <button class="accordion__trigger" data-accordion="start">从哪里开始？</button>
          <div class="accordion__content">
            <ul>
              <li>基础：数组、链表、栈、队列、哈希表</li>
              <li>进阶：树、图、堆、并查集、Trie</li>
              <li>算法模板：排序、二分、回溯、贪心、动态规划</li>
              <li>工具：LeetCode、洛谷、OI-wiki、VisuAlgo</li>
            </ul>
          </div>
        </article>
        <article class="accordion__item">
          <button class="accordion__trigger" data-accordion="mindset">学习心法</button>
          <div class="accordion__content">
            <p>先理解问题再写代码；画图、举例、总结复杂度；完成后复盘：有无更优解？能否泛化？</p>
          </div>
        </article>
      </div>
    </section>

    <section id="languages" class="section section--grid">
      <div class="section__content">
        <h2>编程语言学习 vs 算法修炼</h2>
        <p>
          切换下方模式，比较“语言学习”与“算法修炼”的关注点。左右滑块展示 C 与 Python 的差异。
        </p>
        <div class="mode-toggle" role="tablist">
          <button class="mode-toggle__btn mode-toggle__btn--active" data-mode="language">语言学习</button>
          <button class="mode-toggle__btn" data-mode="algorithm">算法修炼</button>
        </div>
        <ul class="mode-list" id="mode-list"></ul>
      </div>
      <aside class="info-card">
        <h3>C vs Python 对比</h3>
        <label class="slider-label">抽象层级 <input type="range" min="0" max="100" value="50" id="language-slider" /></label>
        <div class="compare" id="lang-compare">
          <div class="compare__item">
            <h4>C 语言</h4>
            <ul>
              <li>接近硬件，性能极佳</li>
              <li>手动内存管理，需关注指针</li>
              <li>标准库简单，需自己搭建工具链</li>
              <li>适合嵌入式、操作系统内核</li>
            </ul>
          </div>
          <div class="compare__item">
            <h4>Python</h4>
            <ul>
              <li>内置高层抽象，语法简洁</li>
              <li>垃圾回收，开发效率高</li>
              <li>生态庞大（数据分析、AI、Web）</li>
              <li>适合快速原型、教学入门</li>
            </ul>
          </div>
        </div>
      </aside>
    </section>

    <section id="network" class="section">
      <h2>网络、爬虫、抓包、渗透与科学上网</h2>
      <div class="grid grid--2">
        <article class="card">
          <h3>网络抓取与安全</h3>
          <dl class="definition-list">
            <div>
              <dt>爬虫</dt>
              <dd>自动获取网页数据，遵守 robots.txt，不侵犯隐私，不破坏服务器。</dd>
            </div>
            <div>
              <dt>抓包</dt>
              <dd>使用 Wireshark/Fiddler 捕获网络数据包，调试协议与排查问题。</dd>
            </div>
            <div>
              <dt>渗透测试</dt>
              <dd>合法授权下模拟攻击，发现漏洞并加固系统，需掌握安全法律与职业伦理。</dd>
            </div>
          </dl>
        </article>
        <article class="card">
          <h3>科学上网工具矩阵</h3>
          <ul class="tool-grid">
            <li data-tooltip="通过加密隧道访问远端网络">VPN</li>
            <li data-tooltip="新一代代理协议与平台，支持 VMess/VLESS/Trojan">V2Ray</li>
            <li data-tooltip="支持多协议客户端，搭配订阅管理节点">Clash</li>
            <li data-tooltip="提供代理节点的服务商，注意合规与隐私">机场</li>
          </ul>
          <p class="note">使用任何代理工具前，务必确认所在地区法律及校园/企业政策，避免违规。</p>
        </article>
      </div>
      <div class="clash-guide">
        <h3>Clash 快速上手</h3>
        <ol>
          <li>下载 Clash 客户端（Windows/Mac/Linux）</li>
          <li>获取机场/自建服务提供的订阅链接</li>
          <li>导入配置，选择节点，开启系统代理</li>
          <li>使用浏览器插件（SwitchyOmega）按需分流</li>
          <li>访问 <code>https://ip.sb</code> 验证出口 IP 是否切换</li>
        </ol>
        <p>GitHub 无法访问时，可尝试修改 DNS（1.1.1.1/8.8.8.8）、使用镜像站或开启代理。</p>
      </div>
    </section>

    <section id="productivity" class="section section--grid">
      <div class="section__content">
        <h2>效率工具与硬件认知</h2>
        <div class="cards cards--2">
          <article class="card">
            <h3>Office vs WPS</h3>
            <p>Office 功能最全面，适合复杂协作；WPS 轻量灵活，适合日常文档。掌握模板、样式、快捷键（如 Ctrl+H、Ctrl+Shift+L）、云同步提升效率。</p>
          </article>
          <article class="card">
            <h3>键盘与机械轴</h3>
            <p>青轴段落感强适合打字；红轴线性轻盈适合游戏；茶轴兼顾；银轴短键程；静音轴适合办公。挑选时考虑键程、手感、噪音、键帽材质。</p>
          </article>
        </div>
        <div class="build-guide">
          <h3>装机关键部件</h3>
          <ul>
            <li>CPU 与主板插槽匹配，关注供电设计</li>
            <li>内存容量与频率影响多任务、编译速度</li>
            <li>显卡负责图形/AI 计算，注意功耗</li>
            <li>SSD 提升系统响应，NVMe 速度更快</li>
            <li>电源与散热保证稳定，机箱影响风道与扩展</li>
            <li>显示器刷新率、分辨率、色域决定视觉体验；接口选择 HDMI/DP</li>
          </ul>
          <p>HDMI 兼容影音设备，DP 支持更高刷新率和多屏串联。显卡与显示器支持哪种接口，直接决定画面效果。</p>
        </div>
      </div>
      <aside class="info-card">
        <h3>练习建议</h3>
        <ul>
          <li>快捷记忆：Windows <code>Win+Shift+S</code> 截图、macOS <code>Cmd+Space</code> 搜索</li>
          <li>体验 Linux：尝试 WSL、双系统或云服务器</li>
          <li>管理学习时间：番茄钟、任务拆分、每周复盘</li>
          <li>记录问题与解决方案，形成个人知识库</li>
        </ul>
      </aside>
    </section>

    <section id="ai" class="section">
      <h2>AI 时代的学习与开发</h2>
      <div class="grid grid--2">
        <article class="card">
          <h3>AI 辅助编程</h3>
          <p>VibeCoding、GitHub Copilot、Cursor 等工具可提供代码补全、重构建议、测试生成。使用时需审查输出，避免泄露敏感信息。</p>
          <p>建议工作流：先构思 → 让 AI 给框架 → 手动补充细节 → 运行测试 → 记录知识点。</p>
        </article>
        <article class="card">
          <h3>未来技能雷达</h3>
          <ul>
            <li>Prompt Engineering：准确描述需求，获取高质量输出</li>
            <li>数据素养：能读懂数据、评估模型可靠性</li>
            <li>自动化工作流：Zapier、n8n、AutoGen
            </li>
            <li>伦理与安全意识：AI 偏见、数据安全、合规</li>
          </ul>
        </article>
      </div>
      <div class="ai-lab">
        <h3>互动：看看自己的准备度</h3>
        <p>拖动滑块了解你在学习路径上的位置，即时获得行动建议。</p>
        <label class="slider-label">当前阶段 <input type="range" min="0" max="4" value="1" id="stage-slider" /></label>
        <div class="stage-output" id="stage-output">阶段 1 · 刚开始学习编程，建议完成 Hello World 与简单输入输出练习。</div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <p>保持好奇，持续迭代。适合收藏与分享给正在入门的同学。</p>
    <button class="btn btn--ghost" data-scroll="#top">回到顶部</button>
  </footer>

  <template id="timeline-template">
    <div data-phase="phase0">
      <h3>阶段 0 · 电脑素养打底</h3>
      <ul>
        <li>掌握文件夹、路径、压缩与解压</li>
        <li>熟悉浏览器开发者工具、网络调试</li>
        <li>尝试简单脚本：批处理、Shell、Automator</li>
        <li>阅读官方文档与社区资源，养成笔记习惯</li>
      </ul>
    </div>
    <div data-phase="phase1">
      <h3>阶段 1 · 第一门语言</h3>
      <ul>
        <li>选择 Python/C/JavaScript 任一门作为主线</li>
        <li>练习变量、条件、循环、函数、输入输出</li>
        <li>完成 3-5 个小项目，如猜数字、爬取天气、命令行工具</li>
        <li>学习调试工具：断点、日志、单元测试</li>
      </ul>
    </div>
    <div data-phase="phase2">
      <h3>阶段 2 · 算法与数据结构</h3>
      <ul>
        <li>专题刷题：数组与链表 → 栈队列 → 树图 → 动态规划</li>
        <li>分析复杂度，掌握常见算法模板</li>
        <li>参加校内外编程比赛或在线挑战</li>
        <li>复盘错题，沉淀思考路径</li>
      </ul>
    </div>
    <div data-phase="phase3">
      <h3>阶段 3 · 项目与协作</h3>
      <ul>
        <li>加入社团/开源社区，学会 Git Flow 与代码评审</li>
        <li>实践 Web/移动/数据分析项目，形成作品集</li>
        <li>关注测试、日志、监控，理解完整交付流程</li>
        <li>学习容器化与部署：Docker、云服务</li>
      </ul>
    </div>
    <div data-phase="phase4">
      <h3>阶段 4 · 安全思维与 AI</h3>
      <ul>
        <li>了解常见安全威胁，学习渗透测试流程与法律边界</li>
        <li>掌握科学上网工具使用，保障信息获取</li>
        <li>学习 AI 辅助开发工具，打造个人自动化工作流</li>
        <li>持续关注新技术，定位长期发展方向</li>
      </ul>
    </div>
  </template>

  <template id="os-template">
    <div data-os="daily">
      <table>
        <thead>
          <tr><th>系统</th><th>优势</th><th>注意点</th></tr>
        </thead>
        <tbody>
          <tr><td>Windows</td><td>软件支持全面、游戏资源丰富</td><td>注意病毒防护、磁盘整理</td></tr>
          <tr><td>macOS</td><td>生态统一、Retina 屏幕体验佳</td><td>硬件价格高、外设相对受限</td></tr>
          <tr><td>Linux</td><td>开源可定制、学习命令行思维</td><td>部分商业软件缺乏原生支持</td></tr>
        </tbody>
      </table>
    </div>
    <div data-os="dev">
      <table>
        <thead>
          <tr><th>系统</th><th>优势</th><th>注意点</th></tr>
        </thead>
        <tbody>
          <tr><td>Windows + WSL</td><td>兼顾办公与 Linux 开发环境</td><td>需配置终端、避免路径混乱</td></tr>
          <tr><td>macOS</td><td>Unix 体系，Homebrew 包管理，硬件稳定</td><td>部分驱动/游戏兼容性差</td></tr>
          <tr><td>Linux 桌面</td><td>原生开发体验，容器与服务器一致</td><td>需要动手解决驱动与依赖问题</td></tr>
        </tbody>
      </table>
    </div>
    <div data-os="server">
      <table>
        <thead>
          <tr><th>系统</th><th>优势</th><th>注意点</th></tr>
        </thead>
        <tbody>
          <tr><td>Linux (Ubuntu/CentOS)</td><td>稳定、社区丰富、云服务器标配</td><td>学习命令行与安全加固</td></tr>
          <tr><td>Windows Server</td><td>适合 .NET、企业集成</td><td>授权成本高、配置较复杂</td></tr>
          <tr><td>BSD</td><td>网络性能优、适合安全/存储</td><td>资源少、学习曲线陡</td></tr>
        </tbody>
      </table>
    </div>
  </template>

  <template id="mode-template">
    <div data-mode="language">
      <li>构建语法体系：变量、控制流、函数、模块化</li>
      <li>熟悉标准库与生态：包管理器、依赖管理</li>
      <li>学会调试：断点、日志、单元测试、性能分析</li>
      <li>写小项目巩固：命令行工具、Web、自动化脚本</li>
    </div>
    <div data-mode="algorithm">
      <li>抽象问题模型：如何用数据结构表示</li>
      <li>设计解决策略：枚举、分治、动态规划、贪心</li>
      <li>分析复杂度与边界条件，写出可扩展的解</li>
      <li>总结模板与套路，复盘错题，形成“题感”</li>
    </div>
  </template>

  <script src="script.js"></script>
</body>

</html>
